<template>
    <div>
        <el-dialog v-model="dialogFormVisible" :title="title" width="700" center destroy-on-close overflow>
            <el-form style="max-width: 600px" :rules="rules" :model="numberValidateForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="课程号" style="width: 250px;" label-position="right" prop="cno">
                            <el-input v-model="form.cno" :disabled="disabled" autocomplete="off" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="课程名" style="width: 250px;" label-position="right" prop="cname">
                            <el-input v-model="form.cname" autocomplete="off" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课时" style="width: 250px;" label-position="right" prop="classhour">
                            <el-input v-model="form.classhour" v-model.number="numberValidateForm.classhour"
                                autocomplete="off" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学分" style="width: 250px;" label-position="right" prop="credit">
                            <el-input v-model="form.credit" v-model.number="numberValidateForm.credit"
                                autocomplete="off" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item>
                        <div>
                            <el-button type="primary" @click="Onsubmit()">确认</el-button>
                            <el-button @click="Close">取消</el-button>
                        </div>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup name="CourseForm">
import { reactive, ref, defineEmits } from 'vue'
import request from '@/utils/request'
const emit = defineEmits(['submit']);
const title = ref('');
const disabled = ref(false);
const dialogFormVisible = ref(false);
const inteTable = reactive({
    cno: '1111',
    cname: '',
    classhour: '',
    credit: '',
})
const numberValidateForm = reactive({
    classhour: '',
    credit: '',
})
const form = ref(inteTable);
const ShowOrClose = (val) => {
    if (val == undefined || val == null) {
        title.value = '新增课程信息';
        BlankForm();
    }
    else {
        title.value = '编辑课程信息';
        inteTable.cno = val.cno;
        inteTable.cname = val.cname;
        inteTable.classhour = val.classhour;
        inteTable.credit = val.credit;
        disabled.value = true;
    }
    dialogFormVisible.value = true;
}
const formRef = ref(null)
const Onsubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            return;
        } else {
            if (title.value == '编辑课程信息') {
                request({
                    url: 'api/Course?' + 'cno=' + inteTable.cno,
                    method: 'put',
                    data: inteTable
                }).then(res => {
                    if (res.status == 200) {
                        Close();
                        ElMessage({
                            message: '编辑成功.',
                            type: 'success',
                        });
                        emit('submit');
                    }
                })
            } else {
                request({
                    url: 'api/Course',
                    method: 'post',
                    data: inteTable
                }).then(res => {
                    if (res.status == 200) {
                        Close();
                        ElMessage({
                            message: '添加成功',
                            type: 'success'
                        });
                        emit('submit');
                    }
                })
            }
            disabled.value = false;
        }
    })
}
const BlankForm = () => {
    inteTable.cno = '';
    inteTable.cname = '';
    inteTable.classhour = '';
    inteTable.credit = '';
}
const Close = () => {
    BlankForm();
    disabled.value = false;
    dialogFormVisible.value = false;
}
const validateClasshourRange = (rule, value, callback) => {
    if (value === '' || value == null) {
        callback();
    } else if (value < 2 || value > 6) {
        callback(new Error('课时必须在2-6之间'));
    } else {
        callback();
    }
}
const validateCreditRange = (rule, value, callback) => {
    if (value < 2 || value > 5) {
        callback(new Error('课时必须在2-5之间'));
    } else {
        callback();
    }
}
const rules = reactive({
    cno: [
        { required: true, message: '请输入课程号', trigger: 'blur' },
        { length: 4, message: '课程号长度为4位', trigger: 'blur' },
    ],
    cname: [
        { required: true, message: '请输入课程名', trigger: 'blur' },
        { max: 20, message: '课程名长度不能超过20位', trigger: 'blur' },
    ],
    classhour: [
        { type: 'number', message: '课时必须为数字', trigger: 'blur' },
        { validator: validateClasshourRange, trigger: 'blur' },
    ],
    credit: [
        { type: 'number', message: '学分必须为数字', trigger: 'blur' },
        { validator: validateCreditRange, trigger: 'blur' },
    ],
})


defineExpose({
    ShowOrClose,
})
</script>

<style>
.el-form-item {
    margin: 0 auto;
}
</style>